<template>
	<view class="content">

		<view class="top">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u--input v-model="model1.userInfo.name" border="bottom" placeholder="请输入姓名"></u--input>
				<view class="date">
					<view class="left">
						<view @click="model1.userInfo.sex='male'" :class="model1.userInfo.sex=='male'?'sex issex':'sex'"
							style="margin-right: 4px;">男</view>
						<view @click="model1.userInfo.sex='female'"
							:class="model1.userInfo.sex=='female'?'sex issex':'sex'">女</view>
					</view>
					<view class="gongli">
						<view class="left">
							<view @click="model1.userInfo.datetype='gongli'"
								:class="model1.userInfo.datetype=='gongli'?'sex issex':'sex'"
								style="margin-right: 4px;">公历</view>
							<view @click="model1.userInfo.datetype='nongli'"
								:class="model1.userInfo.datetype=='nongli'?'sex issex':'sex'">农历</view>
						</view>
					</view>
				</view>
				<view class="birthday">
					{{model1.userInfo.year}}-{{model1.userInfo.month}}-{{model1.userInfo.day}}
					{{model1.userInfo.hours}}:{{ model1.userInfo.minute}}
				</view>
				<view class="address">
					{{ model1.userInfo.address==''?'地区-默认北京时间':model1.userInfo.address}}
				</view>
				<view class="tests">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view>分类：</view>
						<view class="typeitem">全部</view>
						<view class="typeadd">+</view>
					</view>
					<view style="font-size: 14px;display: flex;align-items: center;"><u-switch space="2"
							v-model="issaveed" activeColor="#b2955d" size="16" inactiveColor="rgba(223, 223, 223, 1.0)">
						</u-switch> <text style="padding-left: 4px;">保存八字</text></view>
				</view>
			</u--form>
		</view>
		<view class="btbazi uibghui" @click="getpaipan">
			八字排盘
		</view>
		<view class="bottom">
			<!-- 底部左边 -->
			<view class="bleft">
				<view class="hepan"><text class="myfont">&#xe62e;</text> 八字合盘</view>
				<view class="luncai"><text class="myfont" style="color: #b2955d;">&#xe602;</text> 八字论财</view>
			</view>
			<!-- 底部右边 -->
			<view class="bright">
				<text class="myfont" style="font-size: 38px;color: #c76161;font-weight: normal;padding-right: 0px;">&#xe601;</text>
				<text >万年历</text>
			</view>
		</view>
		<!-- 出生日期选择器 -->
		<u-datetime-picker :show="birthdayshow" mode="datetime"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				birthdayshow: false, //弹出日期选择器
				issaveed: true, //默认保存排盘结果
				model1: {
					userInfo: {
						name: '', //姓名
						sex: 'male', //默认男male，女female
						datetype: 'gongli', //默认公历gongli，农历nongli
						year: '1990', //出生年
						month: '01', //出生月
						day: '01', //出生日
						hours: '00', //出生时
						minute: '00', //出生分
						address: ''
					}
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			/**
			 * 提交排盘请求
			 */
			getpaipan(){
				//const e
				uni.navigateTo({
					url: 'paipan?detailDate=' + encodeURIComponent(JSON.stringify(this.model1.userInfo))
				});
				console.log()
			}
		}
	}
</script>

<style lang="scss">
	.myfont{
		font-family: myfont;
		font-size: 18px;
		font-weight: bold;
		padding-right: 4px;
	}
	.bottom {
		margin: 10px;
		display: flex;
	}
	.bleft{
		flex: 1;
		padding-right: 10px;
	}
	.hepan{
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 5px;
		text-align: center;
	}
	.luncai{
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		margin-top: 10px;
		text-align: center;
	}
	.bright{
		flex: 1;
		background-color: white;
		border-radius: 8px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.typeitem {
		border-radius: 30px;
		font-size: 12px;
		background-color: #b2955d;
		//padding-top: 1px;
		padding-bottom: 1px;
		;
		padding-right: 6px;
		padding-left: 6px;
		color: white;
		margin-right: 4px;
	}

	.typeadd {
		border-radius: 30px;
		font-size: 12px;
		background-color: #c3c3c3;
		padding-top: 0px;
		padding-bottom: 1px;
		padding-right: 6px;
		padding-left: 6px;
		color: white;
		margin-right: 4px;
	}

	.tests {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		font-size: 14px;
	}

	.address {
		border-bottom: #dadbde solid 1px;
		padding: 8px 0;
		font-size: 14px;
		color: #a5a5a5;

	}

	.birthday {
		border-bottom: #dadbde solid 1px;
		padding: 8px 0;
	}

	.gongli {
		display: flex;
	}

	.left {
		display: flex;
	}

	.sex {
		border: #b2955d solid 1px;
		padding: 2px 12px;
		border-radius: 2px;
		font-size: 14px;
		color: #b2955d;
	}

	.issex {
		background-color: #b2955d;
		color: white;
	}

	.date {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 8px;
	}

	.top {
		margin: 10px;
		border-radius: 10px;
		background-color: white;
		padding: 20px;
	}

	page {
		background-color: #f7f7f7;
	}

	.btbazi {
		//background-color: #26253d;
		color: white;
		margin: 10px 10px 30px 10px;
		border-radius: 6px;
		padding: 10px;
		text-align: center;
	}
</style>